<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style type="text/css">
        #one{
            font-size: 50px;
        }

        .one{
            /*
                !important：这是一个CSS声明的优先级标志。当添加了这个标志，这个声明将具有更高的优先级，
                可以覆盖其他可能冲突的样式规则。
             */
            font-size: 30px !important;
            color: tomato;
        }

        .two > .three{
            color: green;
        }

        .two > div{
            color: blue !important;
        }


    </style>


</head>
<body>
    <div class="one" id="one">
        我是内容
    </div>

    <div id="two" class="two">
        <div class="three" style="color: purple">我是包含中的div</div>
    </div>

    <div class="two">
        <div class="three">我是包含中的div2</div>
    </div>
</body>
</html>